<template>
  <div>
    <h1>头像</h1>
    <div class="box">
      <template v-if="imgaeUrl">
        <el-image
          style="width: 260px; height: 260px"
          :src="imgaeUrl"
          class="avatar"
        ></el-image>
      </template>
      <template v-else>
        <label for="fileInput" class="file-upload">
          <span class="file-upload-label">选择头像 </span>
          <input
            id="fileInput"
            type="file"
            ref="fileInput"
            @change="handleFileChange"
          />
        </label>
      </template>
    </div>
    <el-button class="button" @click="imageEmpty">修改头像</el-button>
    <common-form
      :formLabel="operTateFormLabel"
      :inline="true"
      :form="operateForm"
      ref="form"
    ></common-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="empty">清空</el-button>
      <el-button type="primary" @click="editData">更新信息</el-button>
    </div>
  </div>
</template>
  
<script>
import { mapState } from "vuex";
import { getUserInfo, editUserInfo } from "../../api/data";
import CommonForm from "../../components/CommonForm";
export default {
  name: "person",
  components: {
    CommonForm,
  },
  data() {
    return {
      imgaeUrl: "",
      fits: "fill",
      operTateFormLabel: [
        {
          model: "username",
          label: "用户名",
          type: "input",
        },
        {
          model: "id",
          label: "ID",
          type: "input",
        },
        {
          model: "nickname",
          label: "昵称",
          type: "input",
        },
        {
          model: "email",
          label: "电子邮件",
          type: "input",
        },
      ],
      operateForm: {
        username: "",
        email: "",
        id: "",
        nickname: "",
        image: "",
      },
    };
  },
  methods: {
    editData() {
      function areFieldsNotEmpty(form) {
        return form.email && form.id && form.nickname && form.username;
      }
      if (areFieldsNotEmpty(this.operateForm)) {
        let Authorization = this.$store.state.user.token;
        let formData = new FormData();
        formData.append("username", this.operateForm.username);
        formData.append("email", this.operateForm.email);
        formData.append("nickname", this.operateForm.nickname);
        formData.append("id", this.operateForm.id);
        formData.append("image", this.operateForm.image);
        let params = [formData, Authorization];
        console.log(params);
        editUserInfo(params).then(({ data: res }) => {
          if (res.status == 0) {
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              message: "上传失败",
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "不能为空",
          type: "warning",
        });
      }
    },
    getList() {
      getUserInfo(this.$store.state.user.token).then(({ data: res }) => {
        if (res.status == 0) {
          let stringToDelete = "picture/";
          let originalString = res.data.user_pic;
          let baseUrl = "http://127.0.0.1:3002/";
          let newString = baseUrl + originalString.replace(stringToDelete, "");
          this.imgaeUrl = newString;
          this.operateForm.username = res.data.username;
          this.operateForm.email = res.data.email;
          this.operateForm.id = res.data.id;
          this.operateForm.nickname = res.data.nickname;
        }
      });
    },
    empty() {
      this.operateForm = {
        username: "",
        email: "",
        id: "",
        nickname: "",
      };
      this.imgaeUrl = "";
    },
    imageEmpty() {
      this.imgaeUrl = "";
    },
    handleFileChange(event) {
      const file = this.$refs.fileInput.files[0];

      // 这里可以对选中的文件进行其他处理
      this.operateForm.image = file;
    },
  },
  computed: {
    ...mapState({
      userToken: (state) => state.user.token,
    }),
  },
  created() {
    this.getList();
  },
};
</script>
  
  <style lang="less" scoped>
h1 {
  margin: 20px;
  margin-left: 50px;
}
.dialog-footer {
  margin-left: 1100px;
}
.button {
  margin: 20px;
  margin-left: 50px;
}
.box {
  margin-left: 50px;
  width: 450px;
  height: 260px;
}
.file-upload {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.file-upload input[type="file"] {
  position: absolute;
  font-size: 100px;
  opacity: 0;
  top: 0;
  right: 0;
}

.file-upload-label {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>